import React, { useState } from 'react'
import './Message.css'
import { Input } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { LeftOutline } from 'antd-mobile-icons'
const Message = () => {
    const navigate = useNavigate()
    const [value, setValue] = useState('')
    const [Mlist, setMlist] = useState<any[]>(['123'])
    const send = () => {
        setMlist([...Mlist, value])
        setValue('')
    }
    return (
        <div>
            <span onClick={()=>{navigate(-1)}}><LeftOutline /></span>
            <div>
                <p>小黑：123</p>
            </div>
            <div className='xx'>
                {
                    Mlist.map((item) => {
                        return (
                            <p style={{ textAlign: 'right' }}>{item}  ：张三</p>
                        )
                    })
                }
            </div>
            <div className='foot'>
                <Input
                    placeholder='请输入内容'
                    value={value}
                    onChange={val => {
                        setValue(val)
                    }}
                />
                 <button onClick={send}>发送</button>
            </div>
           
        </div>
    )
}

export default Message
